// 补间动画tween
import { useEffect } from 'react'
import * as THREE from 'three'
import './App.css'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入补间动画
import TWEEN from 'three/examples/jsm/libs/tween.module.js';

function App() {

    useEffect(() => {
        // 场景
        const scene = new THREE.Scene()
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            45,//相机的角度
            window.innerWidth / window.innerHeight,//相机的宽高比
            0.1,//相机的近截面
            1000//相机的远截面
        )

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)//设置渲染尺寸
        document.body.appendChild(renderer.domElement)//将渲染器添加到文档中

        // --------------------------------main--------------------------------------------
        // 创建几何体
        // 创建一个球
        const geometry = new THREE.SphereGeometry(1, 32, 32)
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
        const sphere = new THREE.Mesh(geometry, material)
        scene.add(sphere)
        sphere.position.x = -4
        // 创建补间动画

        const tween = new TWEEN.Tween(sphere.position)
        tween.to({ x: 4 }, 2000)
        // 重复无数次
        tween.repeat(Infinity)
        // 循环往返
        // tween.yoyo(true)
        // 启动补间动画
        tween.start()

        // 创建gridhelper
        const gridHelper = new THREE.GridHelper(100, 50)
        scene.add(gridHelper)

        // 创建星星
        function addStar() {
            const geometry = new THREE.SphereGeometry(0.25, 24, 24);
            const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
            const star = new THREE.Mesh(geometry, material);

            const [x, y, z] = Array(3)
                .fill()
                .map(() => THREE.MathUtils.randFloatSpread(100));

            star.position.set(x, y, z);
            scene.add(star);
        }

        Array(200).fill().forEach(addStar);
        // 添加环境光
        // Lights

        const pointLight = new THREE.PointLight(0xffffff);
        pointLight.position.set(5, 5, 5);

        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 减少强度
        // 添加环境光
        scene.add(ambientLight)
        // const spaceTexture = new THREE.TextureLoader().load('123.png')
        // scene.background = spaceTexture;
        // --------------------------------main--------------------------------------------

        // 设置相机位置
        camera.position.z = 25
        camera.position.y = 2
        camera.position.x = 2
        camera.lookAt(0, 0, 0)

        // 添加世界坐标辅助器
        const axesHelper = new THREE.AxesHelper(5)
        scene.add(axesHelper)
        // 添加轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement)
        controls.update()



        // 渲染函数
        function animate() {
            requestAnimationFrame(animate)
            renderer.render(scene, camera)
            // 轨道控制器更新
            controls.update()
            // // 更新补间动画
            TWEEN.update()
        }
        // 调用渲染函数
        animate()

    }, [])
    return (
        <>
        </>
    )
}

export default App
